<template>
  <div>
    <n-form
      :model="formParams"
      ref="formRef"
      label-placement="left"
      :label-width="100"
      class="py-4"
    >
      <n-grid :cols="24" :x-gap="24">
        <n-form-item-gi :span="24" label="类型" path="type" :rule="rules.type">
          <n-radio-group v-model:value="formParams.type">
            <n-radio-button :value="1" label="目录" />
            <n-radio-button :value="2" label="菜单" />
            <n-radio-button :value="3" label="按钮" />
          </n-radio-group>
        </n-form-item-gi>
        <n-form-item-gi :span="24" :label="'上级' + typeLable" path="parentKey">
          <n-tree-select :options="treeData" v-model:value="formParams.parentKey" clearable />
        </n-form-item-gi>
        <n-form-item-gi
          :span="12"
          :label="`名称`"
          path="title"
          :rule="{ required: true, message: `请输入${typeLable}名称`, trigger: 'blur' }"
        >
          <n-input :placeholder="`${typeLable}名称`" v-model:value="formParams.title" />
        </n-form-item-gi>
        <n-form-item-gi :span="12" :label="`${typeLable}图标`" path="icon">
          <n-input :placeholder="`${typeLable}图标`" v-model:value="formParams.icon" />
        </n-form-item-gi>
        <n-form-item-gi :span="12" label="路由地址" path="path" :rule="rules.path">
          <n-input placeholder="路由地址" v-model:value="formParams.path" />
        </n-form-item-gi>
        <n-form-item-gi :span="12" label="默认路由" path="redirect" v-if="formParams.type === 1">
          <n-input placeholder="默认路由" v-model:value="formParams.redirect" />
        </n-form-item-gi>
        <n-form-item-gi :span="12" label="路由名称" path="name" :rule="rules.name">
          <n-input placeholder="路由名称" v-model:value="formParams.name" />
        </n-form-item-gi>
        <n-form-item-gi :span="12" label="显示排序" path="sort">
          <n-input-number v-model:value="formParams.sort" clearable />
        </n-form-item-gi>
        <n-form-item-gi :span="24" label="组件路径" path="component" v-if="formParams.type !== 3">
          <n-input placeholder="组件路径" v-model:value="formParams.component" />
        </n-form-item-gi>
        <n-form-item-gi :span="24" label="是否缓存" path="keepAlive">
          <n-radio-group v-model:value="formParams.keepAlive" :default-value="true">
            <n-radio-button :value="true" label="开启" />
            <n-radio-button :value="false" label="关闭" />
          </n-radio-group>
        </n-form-item-gi>
        <n-form-item-gi :span="24" path="auth" style="margin-left: 100px" v-if="!addFlag">
          <n-space>
            <n-button type="primary" :loading="subLoading" @click="formSubmit">保存修改</n-button>
            <n-button @click="handleDel">删除</n-button>
          </n-space>
        </n-form-item-gi>
      </n-grid>
    </n-form>
  </div>
</template>
<script lang="ts">
  import { defineComponent, ref, reactive, toRefs, computed, watch } from 'vue';
  import { useDialog, useMessage } from 'naive-ui';
  import {
    addPermissionInfo,
    updatePermissionInfo,
    deletePermissionInfo,
  } from '@/api/system/permission';

  export default defineComponent({
    name: 'MenuForm',
    props: {
      form: Object,
      addFlag: Boolean,
      treeData: {
        type: Array,
        default() {
          return [];
        },
      },
      submitOk: {
        type: Function,
        default() {},
      },
    },
    setup(props) {
      const { form, addFlag } = toRefs(props);
      const formParams = reactive({
        id: undefined,
        parentKey: '',
        parentId: '',
        type: 1,
        name: '',
        title: '',
        icon: '',
        path: '',
        redirect: '',
        component: '',
        sort: 1,
        keepAlive: true,
      });
      Object.assign(formParams, form.value);

      const rules = {
        type: { required: true, message: '请选择菜单类型', trigger: 'change', type: 'number' },
        name: { required: true, message: '请选择路由名称', trigger: 'blur' },
        path: { required: true, message: '请选择路由地址', trigger: 'blur' },
      };

      const formRef: any = ref(null);
      const message = useMessage();
      const dialog = useDialog();

      const subLoading = ref(false);
      const typeLable = computed(() => {
        if (formParams?.type == 1) {
          return '目录';
        }
        if (formParams?.type == 2) {
          return '菜单';
        }
        if (formParams?.type == 3) {
          return '按钮';
        }
        return '';
      });

      function formSubmit() {
        formRef.value.validate(async (errors: boolean) => {
          if (!errors) {
            if (addFlag.value) {
              await addPermissionInfo(formParams);
            } else {
              await updatePermissionInfo(formParams);
            }
            message.success('保存成功');
            props.submitOk();
            return true;
          } else {
            message.error('请填写完整信息');
            return false;
          }
        });
      }

      function handleDel() {
        dialog.info({
          title: '提示',
          content: `您确定想删除此权限吗?`,
          positiveText: '确定',
          negativeText: '取消',
          onPositiveClick: async () => {
            await deletePermissionInfo(formParams.id);
            message.success('删除成功');
            props.submitOk();
          },
          onNegativeClick: () => {
            message.error('已取消');
          },
        });
      }

      watch(
        form,
        (value) => {
          Object.assign(formParams, value);
        },
        { deep: true }
      );

      return {
        formParams,
        rules,
        formRef,
        subLoading,
        typeLable,
        formSubmit,
        handleDel,
      };
    },
  });
</script>
